.rc-select-avatar {
	display: flex;
	align-items: flex-start;

	&__preview {
		flex: 0 0 var(--select-avatar-preview-size);

		width: var(--select-avatar-preview-size);
		height: var(--select-avatar-preview-size);
		margin-right: 1rem;

		background-color: transparent;
		background-image:
			linear-gradient(45deg, var(--color-gray) 25%, transparent 25%, transparent 75%, var(--color-gray) 75%, var(--color-gray)),
			linear-gradient(45deg, var(--color-gray) 25%, transparent 25%, transparent 75%, var(--color-gray) 75%, var(--color-gray));
		background-position: 0 0, 5px 5px;
		background-size: 10px 10px;
	}

	&__loading::after {
		display: inline-block;
		overflow: hidden;

		width: 0;

		content: "\2026"; /* ascii code for the ellipsis character */
		animation: ellipsis steps(4, end) 1.5s infinite;
		vertical-align: bottom;
	}

	&__list {
		display: flex;
		flex-wrap: wrap;

		&-item {
			width: var(--select-avatar-size);
			height: var(--select-avatar-size);
			margin-right: 10px;
			margin-bottom: 10px;

			&.disabled {
				opacity: 0.4;
			}

			cursor: pointer;

			& .avatar {
				transition: opacity 0.5s;
			}

			& .avatar:hover {
				opacity: 0.8;
			}
		}
	}

	&__upload-label {
		display: block;

		cursor: pointer;

		color: var(--select-avatar-upload-color);
		background: var(--select-avatar-upload-background);
	}

	&__upload-icon {
		width: var(--select-avatar-size);
		height: var(--select-avatar-size);
		padding: 12px;
		fill: currentColor;
	}
}
